<template>
	<view class="my-products-page">
		<!-- 1. 自定义顶部导航栏 -->
		<!-- 在 pages.json 中需要配置 navigationStyle: 'custom' -->
		<!-- <view class="custom-nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<uni-icons type="left" size="24" @click="goBack"></uni-icons>
			<text class="nav-title">我发布的</text>
			<text class="nav-action" @click="gotoSellMore">加入出租场</text>
		</view> -->
		<!-- 顶部导航栏占位，确保内容不被遮挡 -->
		<!-- <view :style="{ height: customNavBarHeight + 'px' }"></view> -->
		<!-- 2. 选项卡 -->
		 <!-- <view class="tabs-container">
			<scroll-view scroll-x class="tabs-scroll" :scroll-into-view="'tab-' + currentTab" scroll-with-animation>
				<view
					v-for="(tab, index) in tabs"
					:key="index"
					:id="'tab-' + index"
					class="tab-item"
					:class="{ active: currentTab === index }"
					@click="changeTab(index)"
				>
					{{ tab.title }}
				</view>
			</scroll-view>
		</view> -->
		<!-- <view class="tabs-section">
			<uni-tabs v-model="activeTabIndex" :tabs="tabs" @change="onTabChange"></uni-tabs>
			<view class="search-btn-tab" @click="handleSearch">
				<uni-icons type="search" size="22" color="#666"></uni-icons>
			</view>
			<view class="marketing-btn" @click="gotoMarketing">
				<uni-icons type="minus-circle" size="18" color="#007aff"></uni-icons>
				<text>营销推广</text>
			</view>
		</view> -->


		<!-- 3. 列表内容区域 (根据activeTabIndex切换显示) -->
		<!-- 使用 scroll-view 实现局部滚动，或者依赖页面本身的下拉刷新 -->
		<!-- 考虑到截图是全页面滚动，我们依赖原生下拉刷新，这里直接渲染列表 -->
		<view class="product-list-container">
			<!-- 根据当前选中的Tab显示对应列表 -->
			<view v-if="currentList && currentList.length > 0">
				<view class="product-item card-style" v-for="(product) in currentList" :key="product.id">
					<!-- 商品图片 -->
					<image class="product-image" :src="getProductImageUrl(product)" mode="aspectFill"></image>

					<!-- 商品信息和统计 -->
					<view class="product-info">
						<text class="product-title">{{ product.title }}</text>
						<text class="product-price">{{ formatPrice(product.price) }}</text>
						<view class="product-stats">
							<text class="stat-item">曝光{{ product.exposure || 0 }}</text>
							<text class="stat-item">浏览{{ product.viewCount || 0 }}</text>
							<text class="stat-item">想要{{ product.wantCount || 0 }}</text>
						</view>
					</view>

					<!-- 操作按钮 -->
					<view class="product-actions">
						<!-- 小刀优惠 (示例) -->
						<!-- <button class="action-btn" size="mini" @click="handleXiaodao(product)">小刀优惠</button> -->
						<!-- 降价 (示例) -->
						<!-- <button class="action-btn" size="mini" @click="handleJiangjia(product)">降价</button> -->
						<!-- 编辑 -->
						<button class="action-btn" size="mini" @click="goToEdit(product)">编辑</button>
						<!-- 下架或上架按钮 -->
						<button v-if="product.status === 'available'" class="action-btn" size="mini" @click="takeDownProduct(product)">下架</button> <!-- 在出租 -> 下架 -->
						<button v-if="product.status === 'delisted'" class="action-btn" size="mini" @click="putOnSale(product)">上架</button> <!-- 已下架 -> 上架 -->
						<!-- 删除按钮 (草稿或已下架状态通常可以删除) -->
						<button v-if="activeTabIndex === 1 || activeTabIndex === 2" class="action-btn delete-btn" size="mini" @click="deleteProduct(product)">删除</button>
					</view>

					<!-- 更多操作按钮 (省略号) -->
					<!-- <view class="more-actions" @click="showMoreActions(product)">
						<text>...</text>
					</view> -->
				</view>

				<!-- 补充服务信息Banner (模拟插入，实际可能根据数据决定位置) -->
				<view v-if="index % 3 === 0" class="service-tip-banner card-style"> <!-- 模拟每隔3个商品出现一次 -->
					<uni-icons type="fire" size="18" color="#ff5000"></uni-icons>
					<text class="tip-text">补充宝贝服务信息，宝贝曝光蹭蹭涨</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>

			</view>
			<view class="empty-state" v-else-if="productLoaded">
				<text>暂无{{ tabs[activeTabIndex].text }}宝贝</text>
                <!-- 可以添加空状态图 -->
			</view>
             <view class="loading-state" v-else>
                 <text>加载中...</text>
                 <!-- 可以添加 loading 动画 -->
             </view>
		</view>
	</view>
</template>

<script>
const app = getApp();

export default {
	components: {
	},
	data() {
		return {
			statusBarHeight: 0, // 状态栏高度
			customNavBarHeight: 0, // 自定义导航栏总高度
			safeAreaInsetsBottom: 0, // 底部安全区高度

			activeTabIndex: 0, // 当前选中Tab的索引 (0:在出租, 1:草稿, 2:已下架)
			tabs: [
				{ value: 'available', title: '在出租' },
				{ value: 'delisted', title: '已下架' }
				// 可以在这里添加数量，例如 { title: '在出租', count: 15 }
				// 但是数量通常是从接口返回的数据中计算而来
			],
			productList: [], // 从接口获取的原始商品列表数据
            productLoaded: false, // 标记列表是否加载完成

			isDeleting: false, // 删除操作进行中
			isTakingDown: false, // 下架操作进行中
			isPuttingOnSale: false, // 上架操作进行中
		};
	},
	computed: {
		// 根据 activeTabIndex 过滤出当前显示的商品列表
		currentList() {
			if (!this.productList) return [];
			return this.productList;
			// switch (this.activeTabIndex) {
			// 	case 0: // 在出租
			// 		return this.productList.filter(p => p.status === 'available');
			// 	case 1: // 草稿
			// 		return this.productList.filter(p => p.status === 'draft');
			// 	case 2: // 已下架
			// 		return this.productList.filter(p => p.status === 'delisted');
			// 	default:
			// 		return [];
			// }
		},
		// 计算每个Tab的数量 (如果需要显示在Tab标题上)
		// tabCounts() {
		//     return {
		//         selling: this.productList.filter(p => p.status === 'published').length,
		//         draft: this.productList.filter(p => p.status === 'draft').length,
		//         takenDown: this.productList.filter(p => p.status === 'takenDown').length,
		//     };
		// }
	},
	onLoad() {
		// 获取系统信息，计算自定义导航栏高度和底部安全区
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		this.customNavBarHeight = systemInfo.statusBarHeight + 44;
		if (systemInfo.safeAreaInsets) {
			this.safeAreaInsetsBottom = systemInfo.safeAreaInsets.bottom;
		}

		uni.setNavigationBarTitle({
			title: '我发布的'
		});

		// 首次加载数据
		// this.loadProductList(); // 移到 onShow
	},
	onShow() {
        // 页面显示时刷新数据，确保从编辑页返回后数据更新
		this.loadProductList();
	},
	// 开启下拉刷新
	onPullDownRefresh() {
		console.log('下拉刷新');
		this.loadProductList(true); // 传递参数表示是下拉刷新触发
	},
	methods: {
		goBack() {
			uni.navigateBack(); // 返回上一页
		},
		gotoSellMore() {
			uni.showToast({ title: '跳转加入出租场 (待实现)', icon: 'none' });
			// uni.navigateTo({ url: '/pages/user/JoinSellerMarket' });
		},
		onTabChange(e) {
			this.activeTabIndex = e.currentIndex;
			console.log('切换到 Tab:', this.tabs[this.activeTabIndex].title);
             // 如果需要，可以在切换Tab时不刷新，只过滤本地数据
             // 但为了数据最新，通常切换Tab也重新请求或确保数据足够新
             // this.loadProductList(); // 如果切换Tab需要重新加载数据
		},

		// 加载商品列表数据
		loadProductList(isPullDown = false) {
            if (!isPullDown) {
                 uni.showLoading({ title: '加载中...' });
                 this.productLoaded = false; // 重置加载状态
            }


			// 调用接口获取我发布的商品列表
			// 假设接口返回的数据是一个数组，每个对象包含 id, title, price, viewCount, wantCount, imageUrls, status(published/draft/takenDown) 等字段
			app.globalData.Request.post(app.globalData.ApiConstant.Product.myPublish, {
				status: ''
			}).then(res => {
				console.log('My product list API response:', res);
				if (res.success && Array.isArray(res.data)) {
					this.productList = res.data;
					console.log('Product list loaded:', this.productList);
				} else {
					uni.showToast({ title: res.message || '获取列表失败', icon: 'none' });
					this.productList = []; // 确保是空数组
				}
                this.productLoaded = true; // 标记加载完成
			}).catch(err => {
				console.error('My product list API error:', err);
				uni.showToast({ title: '加载列表失败', icon: 'none' });
				this.productList = []; // 确保是空数组
                 this.productLoaded = true; // 标记加载完成 (失败)
			}).finally(() => {
				if (!isPullDown) {
                    uni.hideLoading();
                } else {
                    uni.stopPullDownRefresh(); // 停止下拉刷新动画
                }
			});

            // --- 模拟数据，用于本地调试 ---
            // if (!isPullDown) { uni.showLoading({ title: '加载中...' }); }
            // setTimeout(() => {
            //     this.productList = [
            //         { id: 1, title: 'Java代码修改，错误调试，分析代码。', price: 6.66, exposure: 7119, viewCount: 430, wantCount: 71, imageUrls: '/static/mock_product_java.jpg', status: 'published' },
            //         { id: 2, title: '专拍', price: 9999, exposure: 15, viewCount: 1, wantCount: 0, imageUrls: '/static/mock_product_beef.jpg', status: 'published' },
            //         { id: 3, title: '包月30天，新老客户都能续费。支持手', price: 15, exposure: 2573, viewCount: 12, wantCount: 0, imageUrls: '/static/mock_product_cat.jpg', status: 'published' },
            //         { id: 4, title: '海外学术加速 | 一键解锁全球文献', price: '1--15', exposure: 1231, viewCount: 122, wantCount: 20, imageUrls: '/static/mock_product_anya.jpg', status: 'published' },
            //         { id: 5, title: '这是一个草稿商品', price: 100, exposure: 0, viewCount: 0, wantCount: 0, imageUrls: '/static/avatar_placeholder.png', status: 'draft' },
            //         { id: 6, title: '这是一个已下架的商品', price: 50, exposure: 500, viewCount: 50, wantCount: 5, imageUrls: '/static/mock_product_beef.jpg', status: 'takenDown' },
            //         { id: 7, title: '另一个在出租商品', price: 88.88, exposure: 1000, viewCount: 100, wantCount: 10, imageUrls: '/static/mock_product_cat.jpg', status: 'published' },
            //     ];
            //     console.log('Mock product list loaded:', this.productList);
            //     this.productLoaded = true;
            //     if (!isPullDown) { uni.hideLoading(); } else { uni.stopPullDownRefresh(); }
            // }, 1000);
             // --- 模拟数据结束 ---
		},

		// 格式化价格显示
		formatPrice(price) {
			if (price === null || price === undefined) return '¥0.00';
             if (typeof price === 'number') {
                 return `¥${price.toFixed(2)}`;
             }
             // 如果价格是范围字符串，直接返回
             return `¥${price}`;
		},
		// 获取商品列表中的第一张图片URL
		getProductImageUrl(product) {
			if (!product || !product.imageUrls) return '';
			const urls = product.imageUrls.split(',');
			return urls.length > 0 ? urls[0].trim() : '';
		},

		// 操作按钮方法
		handleXiaodao(product) {
			uni.showToast({ title: `对 ${product.title} 小刀优惠 (待实现)`, icon: 'none' });
			// 实现小刀优惠功能
		},
		handleJiangjia(product) {
			uni.showToast({ title: `对 ${product.title} 降价 (待实现)`, icon: 'none' });
			// 实现降价功能，可能需要弹出价格修改框
		},
		goToEdit(product) {
			// uni.showToast({ title: `编辑商品: ${product.title} (待实现)`, icon: 'none' });
			// 跳转到商品编辑页面，并传递商品ID
			uni.navigateTo({ url: `/pages/tb/product/addProduct2?id=${product.id}` });
		},
		takeDownProduct(product) {
            if (this.isTakingDown) return;
			uni.showModal({
				title: '确认下架',
				content: `确定下架商品 "${product.title}" 吗？`,
				confirmColor: '#ff5000',
				success: (res) => {
					if (res.confirm) {
                        this.isTakingDown = true;
                        uni.showLoading({ title: '下架中...' });
						// 调用下架接口
						app.globalData.Request.post(app.globalData.ApiConstant.Product.delisted + '/' + product.id, { })
							.then(apiRes => {
                                uni.hideLoading();
								if (apiRes.success) {
									uni.showToast({ title: '下架成功', icon: 'success' });
									this.loadProductList(); // 刷新列表
								} else {
									uni.showToast({ title: apiRes.message || '下架失败', icon: 'none' });
								}
							})
							.catch(err => {
                                uni.hideLoading();
								console.error('Take down product API error:', err);
								uni.showToast({ title: '下架失败', icon: 'none' });
							})
                            .finally(() => {
                                this.isTakingDown = false;
                            });
					}
				}
			});
		},
		putOnSale(product) {
             if (this.isPuttingOnSale) return;
			uni.showModal({
				title: '确认上架',
				content: `确定上架商品 "${product.title}" 吗？`,
				confirmColor: '#ffc800', // 闲鱼黄作为确认色
				success: (res) => {
					if (res.confirm) {
                        this.isPuttingOnSale = true;
                         uni.showLoading({ title: '上架中...' });
						// 调用上架接口 (假设有一个 putOnSale 接口)
						// 如果没有单独的上架接口，下架/上架可能共用一个修改状态接口
						app.globalData.Request.post(app.globalData.ApiConstant.Product.available + '/' + product.id,{})
							.then(apiRes => {
                                 uni.hideLoading();
								if (apiRes.success) {
									uni.showToast({ title: '上架成功', icon: 'success' });
									this.loadProductList(); // 刷新列表
								} else {
									uni.showToast({ title: apiRes.message || '上架失败', icon: 'none' });
								}
							})
							.catch(err => {
                                uni.hideLoading();
								console.error('Put on sale product API error:', err);
								uni.showToast({ title: '上架失败', icon: 'none' });
							})
                            .finally(() => {
                                this.isPuttingOnSale = false;
                            });
					}
				}
			});
        },
		deleteProduct(product) {
            if (this.isDeleting) return;
			uni.showModal({
				title: '确认删除',
				content: `确定删除商品 "${product.title}" 吗？删除后不可恢复。`,
				confirmColor: '#f56c6c', // 红色作为删除确认色
				success: (res) => {
					if (res.confirm) {
                        this.isDeleting = true;
                         uni.showLoading({ title: '删除中...' });
						// 调用删除接口
						app.globalData.Request.post(app.globalData.ApiConstant.Product.delete, { productId: product.id })
							.then(apiRes => {
                                 uni.hideLoading();
								if (apiRes.success) {
									uni.showToast({ title: '删除成功', icon: 'success' });
									this.loadProductList(); // 刷新列表
								} else {
									uni.showToast({ title: apiRes.message || '删除失败', icon: 'none' });
								}
							})
							.catch(err => {
                                 uni.hideLoading();
								console.error('Delete product API error:', err);
								uni.showToast({ title: '删除失败', icon: 'none' });
							})
                            .finally(() => {
                                this.isDeleting = false;
                            });
					}
				}
			});
		},

		// 其他功能入口
		handleSearch() {
			uni.showToast({ title: '搜索宝贝 (待实现)', icon: 'none' });
			// 跳转到搜索页面或弹出搜索框
		},
		gotoMarketing() {
			uni.showToast({ title: '营销推广 (待实现)', icon: 'none' });
			// 跳转到营销推广页面
		}
	}
};
</script>

<style lang="scss" scoped>
.my-products-page {
	background-color: #f7f8fa; // 页面背景色
	min-height: 100vh;
	// padding-bottom 由底部固定元素和安全区承担
}

/* 1. 自定义顶部导航栏 */
.custom-nav-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 44px; // 通常的导航栏高度
	// padding-top 由 js 动态绑定
	background-color: #ffe431; // 顶部背景色为黄色
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: content-box; // 确保padding不影响高度计算
	z-index: 999;
	color: #303133; // 导航栏文字颜色

	.nav-title {
		font-size: 17px;
		font-weight: bold;
		// flex-grow: 1; // 如果需要标题居中，并且两边元素宽度不固定
		// text-align: center;
		// transform: translateX(-some-value); // 根据两边按钮宽度微调
	}
	.nav-action {
		font-size: 14px;
		margin-left: auto; // 将加入出租场推到最右边
	}
	// 调整返回按钮和标题的间距（可选）
	.uni-icons-left {
		margin-right: 15px;
	}
}
// 顶部导航栏占位的高度由js动态计算并绑定

/* 2. 选项卡和其右侧的按钮 */
.tabs-section {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 0 24rpx; // 左右padding
    height: 90rpx; // 给tab和右侧按钮一个高度
    box-sizing: border-box;
    position: sticky; // 粘性定位
    top: v-bind(customNavBarHeight + 'px'); // 吸顶位置在自定义导航栏下方
    z-index: 10; // 确保在列表上方

	::v-deep .uni-tabs {
		flex-grow: 1; // Tabs占据大部分空间
        width: 0; // 辅助 flex-grow 生效
		.uni-tabs__nav {
			border-bottom: none !important; // 移除默认底部边框
		}
		.uni-tabs__nav-item {
			padding: 0 20rpx; // 调整tab项内边距
             line-height: 90rpx; // 与父容器高度一致，垂直居中
             height: 90rpx;
		}
		.uni-tabs__active-line {
			background-color: #ffc800 !important; // 选中tab下划线颜色 (闲鱼黄)
             height: 6rpx !important; // 下划线粗细
             bottom: 0rpx !important; // 调整下划线位置
		}
		.uni-tabs__nav-item-text {
			font-size: 30rpx; // Tab文字大小
			color: #666;
			&.is-active {
				color: #333; // 选中Tab文字颜色
				font-weight: bold;
			}
		}
	}
	.search-btn-tab {
		margin-left: 10rpx; // 与tabs留间距
        flex-shrink: 0; // 防止被挤压
	}
	.marketing-btn {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #555;
		margin-left: 20rpx; // 与搜索按钮留间距
        flex-shrink: 0;
		uni-icons {
			margin-right: 5rpx;
		}
	}
}


/* 3. 列表内容区域 */
.product-list-container {
	padding: 0 24rpx; // 左右padding
	padding-top: 20rpx; // 列表顶部留白，与tabs分隔
}
.product-item {
	display: flex;
	align-items: flex-start; // 顶部对齐图片和信息
	margin-bottom: 20rpx;
	// card-style 提供了背景、圆角、阴影、padding

	.product-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		flex-shrink: 0; // 防止图片被压缩
		background-color: #f0f0f0;
	}
	.product-info {
		flex-grow: 1;
		min-width: 0; // 允许内容换行
		margin-right: 20rpx; // 与操作按钮留间距

		.product-title {
			font-size: 28rpx;
			color: #333;
			line-height: 1.4;
			margin-bottom: 10rpx;
			// 多行省略
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.product-price {
			font-size: 32rpx;
			color: #fa3534; // 红色价格
			font-weight: bold;
			margin-bottom: 15rpx;
             display: block; // 价格独占一行
		}
		.product-stats {
			font-size: 22rpx;
			color: #999;
			.stat-item {
				margin-right: 15rpx;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	.product-actions {
		display: flex;
		flex-direction: column; // 按钮垂直排列
		align-items: flex-end; // 按钮靠右对齐
		flex-shrink: 0; // 防止按钮区域被压缩

		.action-btn {
			background-color: #f5f5f5;
			color: #333;
			border-radius: 25rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin-bottom: 10rpx; // 按钮间距
             margin-left: 0; // 移除 uni-app button 默认的左右 margin
             margin-right: 0;
			border: none;
			&::after { border: none; }
             &.delete-btn {
                color: #f56c6c; // 删除按钮红色
             }
		}
         // 最后一个按钮无底部间距
         .action-btn:last-child {
             margin-bottom: 0;
         }
	}
	.more-actions {
		// 省略号按钮样式 (如果启用)
	}
}

.service-tip-banner {
	display: flex;
	align-items: center;
	background-color: #fff7f0; // 浅橙色背景
	margin-bottom: 20rpx;
	padding: 20rpx 24rpx; // 左右padding由card-style提供，这里调整上下
	border-radius: 16rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);

	uni-icons {
		margin-right: 10rpx;
		flex-shrink: 0;
	}
	.tip-text {
		font-size: 26rpx;
		color: #ff5000; // 橙色文字
		flex-grow: 1;
		margin-right: 10rpx;
	}
	uni-icons[type="right"] {
		flex-shrink: 0;
	}
}


.card-style {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx; // 内部padding
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
}

.empty-state, .loading-state {
	text-align: center;
	padding: 50rpx 0;
	color: #999;
	font-size: 28rpx;
}

/* 底部搜索区域 (如果需要固定到底部) */
/*
.bottom-search-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 15rpx 24rpx;
	box-shadow: 0 -1px 5px rgba(0,0,0,0.05);
	z-index: 100;
	// padding-bottom: calc(15rpx + constant(safe-area-inset-bottom));
	// padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
	display: flex; // 示例，根据实际布局调整
	align-items: center;
	font-size: 28rpx;
	color: #333;
}
*/

.tabs-container {
	background-color: #fff;
	// position: sticky; // 如果Tabs吸顶
	// top: 88rpx; // top-navigation 的高度
	// z-index: 100;
	border-bottom: 1rpx solid #f0f0f0;
	.tabs-scroll {
		white-space: nowrap;
		height: 80rpx;
		.tab-item {
			display: inline-block;
			padding: 0 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #666;
			position: relative;
			&.active {
				color: #333;
				font-weight: bold;
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 6rpx;
					background-color: #FFC800; // 闲鱼黄
					border-radius: 3rpx;
				}
			}
		}
	}
}
</style>